<script setup lang="ts">
import { type IEmits } from './emits';
import { type IPorps } from './props';
import 'overlayscrollbars/overlayscrollbars.css';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
import { nextTick, onMounted, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { defineEmits } from 'vue';

defineProps<IPorps>();
defineEmits<IEmits>();

// InstanceType会获取构造函数类型的实例类型
// typeof OverlayScrollbarsComponent 会得到这个组件或类的构造函数类型
const scrollbar = ref<InstanceType<typeof OverlayScrollbarsComponent>>()

const route = useRoute()

const data = reactive({
  element: <HTMLElement | null>null
})

const event = {
  scrollTo(index: number) {
    if (data.element) {
      // top：想要滚动到的位置，behavior：滚动的行为 smooth 平滑的 而不是直接到指定的地方
      data.element.scrollTo({ top: index, behavior: 'smooth' })
    }
  },
  scrollToTop() {
    if (data.element) {
      data.element.scrollTo({ top: 0, behavior: 'smooth' })
    }
  },
  scrollToBottom(smooth: boolean = true) {
    if (data.element) {
      if (smooth) {
        data.element.scrollTo({
          top: data.element.scrollHeight,
          behavior: 'smooth',
        });
      } else {
        data.element!.scrollTop = data.element!.scrollHeight;
        // console.log('滚动条到底调用', data.element!.scrollHeight);
      }
    } else {
      console.log(data.element, '没值');
    }
  },
}

onMounted(() => {
  nextTick(() => {
    if (scrollbar.value) {
      // getElement方法用来HTML文档中的元素，具体来说，这个方法可以根据不同的参数获取不同类型的元素集合或单个元素。
      const rootNode = scrollbar.value!.getElement();
      // console.log(rootNode);
      data.element =
        rootNode?.querySelector('[data-overlayscrollbars-contents]') ||
        null;
    }
  });
})


defineExpose({
  scrollTo: event.scrollTo,
  scrollToTop: event.scrollToTop,
  scrollToBottom: event.scrollToBottom,
});

</script>

<template>
  <!-- scrollbars中的autoHide这个属性指定滚动条的隐藏行为,值为'move'指的是滚动条将在用户停止滚动条时自动隐藏  
   autoHideDelay 这个属性定义了滚动条在自动隐藏之前需要等待的时间(毫米),这里是500毫秒,意味着滚动条将在用户停止移动后的500毫秒内自动隐藏 -->
  <OverlayScrollbarsComponent ref="scrollbar" defer :options="{
    scrollbars: { autoHide: 'move', autoHideDelay: 500 },
    overflow: { x: 'hidden', y: 'scroll' },
  }" :class="['h-full', 'w-full', { 'pr-2': safeArea }]">
    <slot></slot>
  </OverlayScrollbarsComponent>
</template>
